<template>
	<app-layout>
		<view>
			<view class="basicf">
				<view class="fbottom">
					<view class="fname">姓名</view>
					<input type="text" class="input" placeholder="请输入姓名" :value="name" @blur="blur"
						:disabled="disabled" />
				</view>
				<view class="fbottom">
					<view class="fname">联系方式</view>
					<input type="number" class="input" placeholder="请输入联系电话" :value="phone" @blur="phoneblur"
						placeholder-style="style" :disabled="disabled" />
				</view>
			</view>
			<view class="basicf">
				<view class="fcomp">
					内容
				</view>
				<textarea name="" :value="describe" id="" @blur="textblur" maxlength="-1" cols="30" rows="10"
					placeholder="请描述内容" placeholder-style="font-size:24rpx;color:#999;" class="textaera"></textarea>
			</view>
			<view class="basicf">
				<view class="fidmg">上传图片</view>
				<view class="fidimgs">
					<app-upload-image :value="imgs" @image-event="imageEvent" maxNum="100" margin="0">
					</app-upload-image>
				</view>
			</view>
			<view class="basicf">
				<view class="bar">
					<view class="title">
						上传视频
					</view>
					<text class="icon cuIcon-videofill" style="padding: 20upx;"></text>
					<view class="remove" @click="removevideo" v-if="videosrc != ''">
						移除视频
					</view>
				</view>
				<view class="form-group">
					<view class="form-fid" @click="uploadvideo" v-if="videosrc == ''">
						<view class="fidcardup">
							<view class="fidcardup-hor"></view>
							<view class="fidcardup-ver"></view>
						</view>
						<view class="" style="height: 50rpx;line-height: 50rpx;margin-top: 24rpx;">
							暂无上传视频
						</view>
					</view>
					<view class="form-fid" v-else>
						<video :src="videosrc" mode controls></video>
						<view class="" style="height: 50rpx;line-height: 50rpx;margin-top: 24rpx;">
							上传进度:<text>{{upvideopro}}</text><text style="font-size: 36rpx;color: #666;">/</text><text
								style="font-size: 24rpx;color: #666;">%</text>
						</view>
					</view>
				</view>
			</view>
			<view class="befbutton">
				<button class="fbutton bgbut" @click="formSubmit">提交</button>
			</view>
		</view>
		<view :style="{height: BotHeight + 'rpx'}"></view>
	</app-layout>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	import appRichText from "../../../components/basic-component/app-rich/parse.vue";
	import appUploadImage from '../../../components/basic-component/app-upload-image/app-upload-image'

	export default {
		name: "apply",
		data() {
			return {
				name: '',
				phone: '',
				describe: '',
				imgs: [],
				pic_url: '',
				videosrc: '',
				upvideourl: '',
				upvideopro: 0,

				imgprefix: this.$siteInfo.imgroot,

				inimg: '',
				title: ''
			}
		},
		components: {
			'app-rich-text': appRichText,
			appUploadImage
		},
		computed: {
			...mapState({
				userInfo: state => state.user.info,
				appSetting: state => state.mallConfig.mall.setting
			}),
			...mapGetters('iPhoneX', {
				BotHeight: 'getBotHeight',
				getNavHei: 'getNavHei',
			}),
		},
		mounted() {

		},
		onReady() {
			if (this.title != '') {
				uni.setNavigationBarTitle({
					title: this.title
				})
			}
		},
		onLoad: function(options) {
			// this.imgprefix = this.$siteInfo.imgroot
			this.imgReq()
			if (options.title) {
				this.title = options.title
			}
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		onShow() {

		},
		methods: {
			moveStop() {},

			// 跳转
			jump(item) {
				uni.navigateTo({
					url: item
				})
			},
			// 鼠标点击其他地方获取input内内容
			blur(e) {
				this.name = e.target.value
			},
			phoneblur(e) {
				this.phone = e.target.value
			},
			textblur(e) {
				this.describe = e.target.value
			},
			imageEvent(e) {
				this.pic_url = e.imageList.toString();
			},
			// 上传视频
			uploadvideo() {
				let that = this;
				uni.chooseVideo({
					compressed: true,
					success: (res) => {
						if (res.errMsg == 'chooseVideo:ok') {
							that.videosrc = res.tempFilePath
							// that.videocover = res.thumbTempFilePath
							let unpro = uni.uploadFile({
								url: that.$api.upload.file,
								filePath: res.tempFilePath,
								name: 'file',
								fileType: 'video',
								success(e) {
									const data = e.data;
									let result = null;
									if (typeof data === 'string') {
										result = JSON.parse(data);
									} else {
										result = data;
									}
									if (result.code == 0) {
										that.upvideourl = result.data.url;
									} else {
										uni.showModal({
											title: '',
											content: result.msg,
											showCancel: false,
										})
									}
								},
								fail(e) {
									if (e && e.errMsg) {
										uni.showModal({
											title: '错误',
											content: e.errMsg,
											showCancel: false,
										});
									}
								},
							});
							unpro.onProgressUpdate(e => {
								// 上传进度 e.progress 1-100
								that.upvideopro = e.progress
							})
						}

					},
					fail: (err) => {
						console.log(err);
					},
				})
			},
			// 移除视频
			removevideo() {
				this.videosrc = ''
				this.upvideourl = ''
				this.upvideopro = 0
			},
			//SUBMIT
			formSubmit: function(e) {
				const self = this;
				if (!self.name) {
					uni.showToast({
						title: "姓名不能为空",
						icon: 'none'
					});
					return;
				}
				if (!self.phone) {
					uni.showToast({
						title: "联系电话不能为空",
						icon: 'none'
					});
					return;
				}
				if (!(/^1[23456789]\d{9}$/).test(self.phone)) {
					uni.showToast({
						title: "联系电话格式不正确",
						icon: 'none'
					});
					return;
				}
				if (!self.describe) {
					uni.showToast({
						title: "内容不能为空",
						icon: 'none'
					});
					return;
				}
				if (self.pic_url == '') {
					uni.showToast({
						title: '请上传图片',
						icon: "none"
					})
					return
				}
				if (self.videosrc == '') {
					uni.showToast({
						title: '请上传视频',
						icon: 'none'
					})
					return;
				}
				if (self.upvideopro != 100) {
					uni.showToast({
						title: '视频正在上传中，请等待',
						icon: 'none'
					})
					return;
				}
				if (self.upvideourl == '') {
					uni.showToast({
						title: '请上传视频',
						icon: 'none'
					})
					return;
				}
				let cont = {
					name: self.name,
					phone: self.phone,
					content: self.describe,
					videosrc: self.upvideourl,
				}
				let sdata = {
					type: 0,
					content: JSON.stringify(cont),
					pid: 0,
					title: self.title != '' ? self.title : '联系我们',
					pic_url: self.pic_url
				}

				self.$request({
					url: self.$api.complaint.subcomplaint,
					data: sdata,
					method: 'post'
				}).then((res) => {
					if (res.code == 0) {
						uni.showToast({
							title: "提交成功",
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				}).catch(() => {

				})
			},

			imgReq() {
				this.$request({
					url: this.$api.navs.list,
					data: {
						pid: 276,
						status: 1
					}
				}).then((res) => {
					this.inimg = res.data.list[0].icon_url
				}).catch(() => {

				})
			},
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				title: '联系我们',
				path: '/pages/index/index',
				imageUrl: this.inimg,
				params: {

				}
			});
		},
		onShareTimeline() {
			return this.$shareTimeline({
				title: '联系我们',
				query: {

				},
				imageUrl: this.inimg,
			});
		},
	}
</script>

<style scoped lang="scss">
	/* 表单 */
	.basicf {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 42rpx 0;
		width: 686rpx;
		background-color: #FFFFFF;
		margin: 32rpx auto;
		border-radius: 32rpx;
	}

	/* 内容 */
	.fcomp {
		width: 550rpx;
		margin: 0 auto;
		line-height: 42rpx;
		color: #333333;
		font-size: 28rpx;
	}

	.textaera {
		width: 550rpx;
		height: 318rpx;
		padding: 24rpx 36rpx;
		border-radius: 16rpx;
		background: #F4F4F4;
		margin: 30rpx auto;
		font-size: 24rpx;
		line-height: 36rpx;
	}

	// 上传图片
	.fidmg {
		width: 550rpx;
		margin: 0 auto;
		border-bottom: 2rpx solid #F2F2F2;
		line-height: 72rpx;
		color: #333333;
		font-size: 28rpx;
	}

	.fidimgs {
		width: 550rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
	}

	// 上传视频
	.bar {
		width: 550rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		min-height: 100upx;
		background-color: #FFFFFF;

		.title {
			text-align: justify;
			font-size: 30upx;
			position: relative;
			height: 60upx;
			line-height: 60upx;
		}

		.icon {
			flex: 1;
		}

		.remove {
			font-size: 26rpx;
		}
	}

	.form-group {
		width: 550rpx;
		margin: 0 auto;

		background-color: #ffffff;

		.form-fid {
			// padding: 0 0 32rpx;

			.fidcardup {
				background: #F4F4F4;
				width: 550rpx;
				height: 330rpx;
				position: relative;
				border-radius: 16rpx;
			}

			.fidcardup-hor {
				position: absolute;
				width: 258rpx;
				height: 6rpx;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				background: #FFFFFF;
			}

			.fidcardup-ver {
				position: absolute;
				width: 156rpx;
				height: 4rpx;
				background: #FFFFFF;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%) rotate(90deg);
				background: #FFFFFF;
			}

			view {
				font-size: 28rpx;
				color: #666;
			}

			text {
				font-size: 32rpx;
				color: #333;
			}

			video {
				display: block;
				width: 550rpx;
				height: 330rpx;
				border-radius: 16rpx;
			}
		}

		.chmark {
			width: 36rpx;
			height: 36rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.fbottom {
		width: 550rpx;
		margin: 0 auto;
		padding: 24rpx 0 0;
		line-height: 72rpx;
		border-bottom: 2rpx solid #F2F2F2;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333333;
	}

	.fbottom .fname {
		width: 176rpx;
	}

	.peditext {
		color: #999999;
	}

	.fbottom .input {
		width: 374rpx;
	}

	.fbottom .input .logoStore {
		width: 170rpx;
		height: 170rpx;
		position: relative;
	}

	.fbottom .input .logoStore .remove {
		width: 40#{rpx};
		height: 40#{rpx};
		position: absolute;
		right: -16rpx;
		top: -10rpx;
		// background: $uni-important-color-red;
		background: #333333;
		color: #fff;
		border-radius: 50%;
		padding-bottom: 8#{rpx};
		font-size: 24#{rpx};
	}

	.fbottom .input .logoStore .image {
		width: 100%;
		height: 100%;
	}

	.fbottom .input .logoStore.bg {
		background: #F4F4F4;
		position: relative;
	}

	.fbottom .input .logoStore .logoStore-hor {
		position: absolute;
		width: 80rpx;
		height: 2rpx;
		left: 48rpx;
		top: 87rpx;
		background: #FFFFFF;
	}

	.fbottom .input .logoStore .logoStore-ver {
		position: absolute;
		width: 80rpx;
		height: 2rpx;
		left: 48rpx;
		top: 87rpx;
		background: #FFFFFF;
		transform: rotate(90deg);
	}

	.fbottom .input.time {
		display: flex;
		align-items: center;
	}

	.fbottom .input .center {
		padding: 0 20rpx;
	}

	.befbutton {
		background: #342B2A;
		border-radius: 64rpx;
		width: 686rpx;
		height: 88rpx;
		margin: 48rpx auto;
		overflow: hidden;
	}

	.fbutton {
		border-radius: 64rpx;
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-weight: bold;
		font-size: 36rpx;
	}

	.bsbut {
		color: #FFFFFF;
		background: #CD9C62;
	}

	.bgbut {
		background: #342B2A;
		color: #FFFFFF;
	}

	.bcbut {
		border: 1rpx solid #342B2A;
		color: #342B2A;
	}
</style>
